<script setup>
import { ref, computed, onMounted } from 'vue'
import { Tab, Tabs, Icon, Tag, Button, NavBar } from 'vant'
import { useRouter } from "vue-router";
import axios from "@/utils/axios.js"
import {useUserStore} from "@/stores/user.js";

const users = useUserStore().user

const router = useRouter()
const activeTab = ref(0)
// 通知数据
const notifications = ref({
  all: [],  // 全部通知（合并管理员和点赞通知）
  admin: [], // 管理员通知
  like: []   // 点赞通知
})

onMounted(() => {
  init()
})

const us = JSON.parse(sessionStorage.getItem("user"));

const init = async () => {
  try {
    // 获取管理员通知
    const adminRes = await axios.get(`api/adminNotifications/getAdminNotifications/${us.userId}`)
    notifications.value.admin = adminRes.data.map(item => ({
      ...item,
      read: false,
      type: 'admin'
    }))

    // 获取点赞通知
    const likeRes = await axios.get(`api/likeNotifications/getLikeNotifications/1`)
    notifications.value.like = likeRes.data.map(item => ({
      ...item,
      read: false,
      type: 'like'
    }))

    // 合并所有通知
    notifications.value.all = [...notifications.value.admin, ...notifications.value.like]
  } catch (error) {
    console.error('获取通知失败:', error)
    ElMessage.error('获取通知失败')
  }
}

// 获取图标
const getIcon = (type) => {
  return type === 'admin' ? 'volume-o' : 'like-o'
}

// 计算未读数量
const unreadCount = computed(() => {
  return {
    all: notifications.value.all.filter(item => !item.read).length,
    admin: notifications.value.admin.filter(item => !item.read).length,
    like: notifications.value.like.filter(item => !item.read).length
  }
})

// 查看详情
const viewDetails = (item) => {
  console.log('查看通知详情:', item)
  if (!item.read) {
    item.read = true
    ElMessage.success('已标记为已读')
  }
}

// 删除通知
const deleteNotification = (type, id) => {
  notifications.value[type] = notifications.value[type].filter(item => item.notificationId !== id)
  // 同时从all中删除
  notifications.value.all = notifications.value.all.filter(item => item.notificationId !== id)
  ElMessage.success('通知已删除')
}
</script>

<template>
  <!-- 导航栏 -->
  <van-nav-bar
      title="消息通知"
      left-text="返回"
      left-arrow
      @click-left="router.go(-1)"
      fixed
      safe-area-inset-top
  />

  <div class="notification-center">
    <!-- 顶部标签栏 -->
    <van-tabs v-model:active="activeTab" class="notification-tabs" sticky>
      <van-tab title="全部通知">
        <template #title>
          全部通知 <span v-if="unreadCount.all > 0" class="tab-badge">{{ unreadCount.all }}</span>
        </template>
      </van-tab>
      <van-tab title="管理员通知">
        <template #title>
          管理员通知 <span v-if="unreadCount.admin > 0" class="tab-badge">{{ unreadCount.admin }}</span>
        </template>
      </van-tab>
      <van-tab title="点赞通知">
        <template #title>
          点赞通知 <span v-if="unreadCount.like > 0" class="tab-badge">{{ unreadCount.like }}</span>
        </template>
      </van-tab>
    </van-tabs>

    <!-- 通知列表 -->
    <div class="notification-list">
      <!-- 全部通知 -->
      <div v-if="activeTab === 0" class="tab-content">
        <div
            v-for="item in notifications.all"
            :key="item.notificationId"
            class="notification-item"
            :class="{ unread: !item.read }"
        >
          <div class="notification-header">
            <van-icon :name="getIcon(item.type)" class="notification-icon" />
            <div class="notification-title">{{ item.title }}</div>
            <van-tag v-if="!item.read" type="danger" class="notification-badge">新</van-tag>
          </div>
          <div class="notification-content">{{ item.content }}</div>
          <div class="notification-footer">
            <div class="notification-time">{{ item.createdAt }}</div>
            <div class="notification-actions">
              <van-button size="small" type="primary" plain @click="viewDetails(item)">查看详情</van-button>
              <van-button
                  size="small"
                  plain
                  type="danger"
                  @click="deleteNotification(item.type, item.notificationId)"
              >
                删除
              </van-button>
            </div>
          </div>
        </div>
      </div>

      <!-- 管理员通知 -->
      <div v-else-if="activeTab === 1" class="tab-content">
        <div
            v-for="item in notifications.admin"
            :key="item.notificationId"
            class="notification-item"
            :class="{ unread: !item.read }"
        >
          <div class="notification-header">
            <van-icon name="volume-o" class="notification-icon" />
            <div class="notification-title">{{ item.title }}</div>
            <van-tag v-if="!item.read" type="danger" class="notification-badge">新</van-tag>
          </div>
          <div class="notification-content">{{ item.content }}</div>
          <div class="notification-footer">
            <div class="notification-time">{{ item.createdAt }}</div>
            <div class="notification-actions">
              <van-button size="small" type="primary" plain @click="viewDetails(item)">查看详情</van-button>
              <van-button
                  size="small"
                  plain
                  type="danger"
                  @click="deleteNotification('admin', item.notificationId)"
              >
                删除
              </van-button>
            </div>
          </div>
        </div>
      </div>

      <!-- 点赞通知 -->
      <div v-else class="tab-content">
        <div
            v-for="item in notifications.like"
            :key="item.notificationId"
            class="notification-item"
            :class="{ unread: !item.read }"
        >
          <div class="notification-header">
            <van-icon name="like-o" class="notification-icon" />
            <div class="notification-title">{{ item.title }}</div>
            <van-tag v-if="!item.read" type="danger" class="notification-badge">新</van-tag>
          </div>
          <div class="notification-content">{{ item.content }}</div>
          <div class="notification-footer">
            <div class="notification-time">{{ item.createdAt }}</div>
            <div class="notification-actions">
              <van-button size="small" type="primary" plain @click="viewDetails(item)">查看详情</van-button>
              <van-button
                  size="small"
                  plain
                  type="danger"
                  @click="deleteNotification('like', item.notificationId)"
              >
                删除
              </van-button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped>
.notification-center {
  min-height: 100vh;
  background-color: #f7f8fa;
  padding: 16px;
  padding-top: 60px; /* 给导航栏留出空间 */
}

.notification-tabs {
  background: white;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
  margin-bottom: 20px;
}

:deep(.van-tabs__line) {
  background-color: #ff6034;
  height: 3px;
}

:deep(.van-tab) {
  font-size: 16px;
  font-weight: 500;
  padding: 12px 0;
  position: relative;
}

.tab-badge {
  display: inline-block;
  min-width: 18px;
  height: 18px;
  line-height: 18px;
  background-color: #ff6034;
  color: white;
  border-radius: 9px;
  font-size: 12px;
  text-align: center;
  margin-left: 6px;
  padding: 0 5px;
}

.notification-list {
  background: white;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
}

.tab-content {
  padding: 0;
}

.notification-item {
  padding: 16px;
  border-bottom: 1px solid #ebeef5;
  transition: background-color 0.3s;
}

.notification-item:hover {
  background-color: #fafafa;
}

.notification-item:last-child {
  border-bottom: none;
}

.notification-item.unread {
  background-color: #f0f9ff;
  border-left: 3px solid #1890ff;
}

.notification-header {
  display: flex;
  align-items: center;
  margin-bottom: 12px;
}

.notification-icon {
  margin-right: 10px;
  color: #ff976a;
  font-size: 18px;
}

.notification-title {
  font-size: 16px;
  font-weight: 600;
  color: #303133;
  flex: 1;
}

.notification-badge {
  margin-left: 8px;
}

.notification-content {
  font-size: 14px;
  color: #606266;
  line-height: 1.6;
  margin-bottom: 12px;
}

.notification-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.notification-time {
  font-size: 13px;
  color: #909399;
}

.notification-actions {
  display: flex;
  gap: 8px;
}

:deep(.van-button) {
  border-radius: 4px;
}

:deep(.van-button--primary) {
  background-color: #ff976a;
  border-color: #ff976a;
}

:deep(.van-button--primary.van-button--plain) {
  color: #ff976a;
  background-color: #fff;
  border-color: #ff976a;
}

:deep(.van-button--danger.van-button--plain) {
  color: #ff6034;
  background-color: #fff;
  border-color: #ff6034;
}
</style>